<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">
	<h1 class="title ui-widget-header ui-corner-all">DataTable - Grouping</h1>
		<div class="entry">
			<p>DataTable column headers and footers can be grouped for complex display.</p>

            <h:form>
                <p:dataTable var="sale" value="#{tableBean.sales}">

                    <f:facet name="header">
                        Sales/Profits of Manufacturers
                    </f:facet>

                    <p:columnGroup type="header">
                        <p:row>
                            <p:column rowspan="3" headerText="Manufacturer" />
                            <p:column colspan="4" headerText="Sales" />
                        </p:row>

                        <p:row>
                            <p:column colspan="2" headerText="Sales Count" />
                            <p:column colspan="2" headerText="Profit" />
                        </p:row>

                        <p:row>
                            <p:column headerText="Last Year" />
                            <p:column headerText="This Year" />
                            <p:column headerText="Last Year" />
                            <p:column headerText="This Year" />
                        </p:row>
                    </p:columnGroup>

                    <p:column>
                        #{sale.manufacturer}
                    </p:column>

                    <p:column>
                        #{sale.lastYearProfit}%
                    </p:column>

                    <p:column>
                        #{sale.thisYearProfit}%
                    </p:column>

                    <p:column>
                        #{sale.lastYearSale}$
                    </p:column>

                    <p:column>
                        #{sale.thisYearSale}$
                    </p:column>

                    <p:columnGroup type="footer">
                        <p:row>
                            <p:column colspan="3" style="text-align:right" footerText="Totals:" />

                            <p:column footerText="#{tableBean.lastYearTotal}$" />

                            <p:column footerText="#{tableBean.thisYearTotal}$" />
                        </p:row>
                    </p:columnGroup>

                    <f:facet name="footer">
                        Use a bicycle instead of a car
                    </f:facet>
                   
                </p:dataTable>
            </h:form>

		<h3>Source</h3>
		<p:tabView>
			<p:tab title="basicDataTable.xhtml">
                <pre name="code" class="xml">
&lt;h:form&gt;
    &lt;p:dataTable var="sale" value="\#{tableBean.sales}"&gt;

        &lt;f:facet name="header"&gt;
            Sales/Profits of Manufacturers
        &lt;/f:facet&gt;

        &lt;p:columnGroup type="header"&gt;
            &lt;p:row&gt;
                &lt;p:column rowspan="3" headerText="Manufacturer" /&gt;
                &lt;p:column colspan="4" headerText="Sales" /&gt;
            &lt;/p:row&gt;

            &lt;p:row&gt;
                &lt;p:column colspan="2" headerText="Sales Count" /&gt;
                &lt;p:column colspan="2" headerText="Profit" /&gt;
            &lt;/p:row&gt;

            &lt;p:row&gt;
                &lt;p:column headerText="Last Year" /&gt;
                &lt;p:column headerText="This Year" /&gt;
                &lt;p:column headerText="Last Year" /&gt;
                &lt;p:column headerText="This Year" /&gt;
            &lt;/p:row&gt;
        &lt;/p:columnGroup&gt;

        &lt;p:column&gt;
            \#{sale.manufacturer}
        &lt;/p:column&gt;

        &lt;p:column&gt;
            \#{sale.lastYearProfit}%
        &lt;/p:column&gt;

        &lt;p:column&gt;
            \#{sale.thisYearProfit}%
        &lt;/p:column&gt;

        &lt;p:column&gt;
            \#{sale.lastYearSale}$
        &lt;/p:column&gt;

        &lt;p:column&gt;
            \#{sale.thisYearSale}$
        &lt;/p:column&gt;

        &lt;p:columnGroup type="footer"&gt;
            &lt;p:row&gt;
                &lt;p:column colspan="3" footerText="Totals:"
                                style="text-align:right"  /&gt;

                &lt;p:column footerText="\#{tableBean.lastYearTotal}$" /&gt;

                &lt;p:column footerText="\#{tableBean.thisYearTotal}$" /&gt;
            &lt;/p:row&gt;
        &lt;/p:columnGroup&gt;

        &lt;f:facet name="footer"&gt;
            Use a bicycle instead of a car
        &lt;/f:facet&gt;

    &lt;/p:dataTable&gt;
&lt;/h:form&gt;
				</pre>
			</p:tab>

			<p:tab title="TableBean.java">
			<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import org.primefaces.examples.domain.ManufacturerSale

public class TableBean implements Serializable {

	static {
		manufacturers = new String[10];
		manufacturers[0] = "Mercedes";
		manufacturers[1] = "BMW";
		manufacturers[2] = "Volvo";
		manufacturers[3] = "Audi";
		manufacturers[4] = "Renault";
		manufacturers[5] = "Opel";
		manufacturers[6] = "Volkswagen";
		manufacturers[7] = "Chrysler";
		manufacturers[8] = "Ferrari";
		manufacturers[9] = "Ford";
	}

	private final static String[] manufacturers;

	private List&lt;ManufacturerSale&gt; sales;

	public TableBean() {
		populateRandomSales();
	}

    private int getRandomSale() {
		return (int) (Math.random() * 100000);
	}

    private int getRandomProfit() {
		return (int) (Math.random() * 100);
	}

    public List&lt;ManufacturerSale&gt; getSales() {
        return sales;
    }

    private void populateRandomSales() {
        sales = new ArrayList&lt;ManufacturerSale&gt;();

        for(int i = 0; i &lt; 10; i++) {
            sales.add(new ManufacturerSale(manufacturers[i], getRandomSale(), getRandomSale(), getRandomProfit(), getRandomProfit()));
        }
    }

    public int getLastYearTotal() {
        int total = 0;

        for(ManufacturerSale sale : getSales()) {
            total += sale.getLastYearSale();
        }

        return total;
    }

    public int getThisYearTotal() {
        int total = 0;

        for(ManufacturerSale sale : getSales()) {
            total += sale.getThisYearSale();
        }

        return total;
    }
}
				</pre>
			</p:tab>
		</p:tabView>
	       </div>

	</ui:define>
</ui:composition>